<template>
    <view class="whole">
        <view class="pay">
            <view class="header">
                <div>
                    <view class="pay">支付金额</view>
            <view class="payNum">
                <span style="font-size: 34rpx;">￥{{amount}}</span>
            </view>
                </div>
            </view>
            <view class="listPay">
                <uni-icons type="weixin" size="60rpx" color="#00aa00"></uni-icons>
                <view class="text">
                    <view class="wx">微信支付</view>
                    <view class="subWx">推荐使用微信支付</view>
                </view>
                <view class="btn">
                    <label class="radio">
                       <radio value="1" :checked="true" 
                            color="#FFCC33" style="transform:scale(0.7)"
                            @click="changePayType(1)" />
                    </label>
                </view>
            </view>
            <!-- <view class="listPay">
                <uni-icons type="weibo" size="60rpx" color="#ff5500"></uni-icons>
                <view class="text">
                    <view class="wx">线下支付(到付)</view>
                </view>
                <view class="btn">
                    <label class="radio">
                    <radio value="2"  color="#FFCC33" style="transform:scale(0.7)"
                            @click="changePayType(3)" />
                    </label>
                </view>
            </view> -->
            <view class="bootom">
                <button type="warn" style="color: #fff;" @click="confirm">确认支付</button>
            </view>
        </view>
 
	 <view class="bottom_foot"></view>
	 <commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
    </view>
</template>
 
<script>
import global from '@/global.js'

    export default {
        data() {
            return {
             //当前选项
             currentTab:'/pages/orderList/payOrder',
			 serialNo:'',
			 amount:0.00,
            }
        },
        onLoad(option) {
			 console.log("onLoad option amount :   ", option.amount, option.serialNo)
			 this.serialNo= option.serialNo
			 this.amount=option.amount
			 this.fetchData(option.serialNo,option.amount) // 在页面加载时调用fetchData方法获取数据
        },
        methods: {
            // 选择支付方式
            changePayType(type) {
				
            },
            // 确认支付
            confirm() {
     
            },
			fetchData(serialNo , amount){
				this.serialNo= serialNo
				this.amount=amount
			}
        }
    }
</script>
 
<style lang="scss">
    .whole {
        background-color: bgColor;
        display: flex;
        justify-content: center;
 
        .header {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            flex-wrap: wrap;
            height: 300rpx;
 
            .pay {
                width: 100%;
                color: #717171;
            }
 
            .payNum {
                width: 100%;
                font-size: 44rpx;
                margin: 10rpx 0px 20rpx;
            }
        }
 
        .pay {
            width: 100%;
 
            .listPay {
                height: 130rpx;
                display: flex;
                align-items: center;
 
                .uni-icons {
                    margin-left: 20rpx;
                }
 
                .text {
                    width: 40%;
                    margin: 0px 20rpx 0px;
                }
 
                .btn {
                    width: 40%;
                    text-align: right;
                }
            }
 
            .bootom {
                width: 90%;
                margin: auto;
                margin-top: 20rpx;
            }
        }
 
    }
</style>